<template>
  <view class="home-page">
    <view class="bg-image"></view>
    <!-- 顶部用户信息 -->
    <view class="top-bar">
      <image class="user-avatar" :src="user.avatar"></image>
      <text class="user-name">{{ user.name }}</text>
    </view>

    <!-- 搜索栏+AI+消息 -->
    <view class="search-row">
      <view class="search-bar">
        <image src="/static/icons/search1.png" class="search-icon"></image>
        <input class="search-input" placeholder="搜一搜护理知识/通知/客户" />
        <image src="/static/icons/mic.png" class="search-icon"></image>
      </view>
      <image src="/static/icons/ai.png" class="icon-btn" @click="onAIClick"></image>
      <image src="/static/icons/message.png" class="icon-btn" @click="onMessageClick"></image>
    </view>

    <!-- 轮播图 -->
    <view class="swiper-section">
      <swiper class="swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(item, idx) in banners" :key="idx">
          <image :src="item.img" class="swiper-img"></image>
          <view class="swiper-title">{{ item.title }}</view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 颐养资讯 -->
    <view class="news-section">
      <view class="news-header">
        <image src="/static/icons/info.png" class="info-icon"></image>
        <text class="news-title">颐养资讯</text>
        <text class="news-more">更多</text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(item, idx) in newsList" :key="idx">
          <view class="news-date">
            <text class="news-day">{{ item.day }}</text>
            <text class="news-month">{{ item.month }}</text>
          </view>
          <view class="news-content">
            <text class="news-text">{{ item.text }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的日程 -->
    <view class="schedule-section">
      <view class="schedule-header">
        <image src="/static/icons/calendar1.png" class="calendar-icon"></image>
        <text class="schedule-title">我的日程</text>
        <text class="schedule-more">更多</text>
      </view>
      <!-- 真实日历 -->
      <view class="calendar-bar">
        <uv-calendars
          :insert="true"
          :showMonth="true"
          color="#5bb8ac"
          @change="onCalendarChange"
        />
      </view>
      <!-- 添加日程/更多 -->
      <view class="schedule-toolbar">
        <view class="add-schedule" @click="onAddSchedule">
          <image src="/static/icons/add.png" class="add-icon"></image>
          <text>添加日程</text>
        </view>
        <text class="schedule-more-btn" @click="onMoreSchedule">更多</text>
      </view>
      <!-- 工作日程 -->
      <view class="schedule-group-title">工作日程</view>
      <view class="schedule-list">
        <view class="schedule-item" v-for="(item, idx) in workScheduleList" :key="idx">
          <view class="schedule-info">
            <view class="schedule-title2">
              {{ item.title }}
              <text v-if="item.status" :class="['schedule-status-tag', item.status]">
                {{ statusText[item.status] }}
              </text>
            </view>
            <view class="schedule-time">{{ item.time }}</view>
            <view class="schedule-location">地点：{{ item.location }}</view>
          </view>
          <view class="schedule-type work">工作日程</view>
        </view>
      </view>
      <!-- 个人日程 -->
      <view class="schedule-group-title">个人日程</view>
      <view class="schedule-list">
        <view class="schedule-item" v-for="(item, idx) in personalScheduleList" :key="idx">
          <view class="schedule-info">
            <view class="schedule-title2">
              {{ item.title }}
              <text v-if="item.status" :class="['schedule-status-tag', item.status]">
                {{ statusText[item.status] }}
              </text>
            </view>
            <view class="schedule-time">{{ item.time }}</view>
            <view class="schedule-location">地点：{{ item.location }}</view>
          </view>
          <view class="schedule-type personal">个人日程</view>
        </view>
      </view>
    </view>

    <!-- 护理知识模块 -->
    <view class="knowledge-section">
      <view class="knowledge-header">
        <image src="/static/icons/knowledge.png" class="knowledge-icon"></image>
        <text class="knowledge-title">护理知识</text>
        <text class="news-more">更多</text>
      </view>
      <view class="knowledge-list">
        <view class="knowledge-item" v-for="(item, idx) in knowledgeList" :key="idx">
          <text class="knowledge-item-title">{{ item.title }}</text>
          <text class="knowledge-item-desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uvCalendars from '@/uni_modules/uv-calendars/components/uv-calendars/uv-calendars.vue'
import { getUserInfo } from '@/api/user.js'
export default {
  components: { uvCalendars },
  data() {
    return {
      user: {
        avatar: "/static/images/user1.png",
        name: "--"
      },
      banners: [
        { img: '/static/images/banner1.jpg', title: '护理员技能提升培训' },
        { img: '/static/images/banner2.jpg', title: '颐养中心防疫通知' },
        { img: '/static/images/banner3.jpg', title: '长者健康饮食小知识' }
      ],
      newsList: [
        { day: '10', month: '2025-07', text: '护理部召开服务质量提升会' },
        { day: '09', month: '2025-07', text: '举办长者安全护理培训' },
        { day: '08', month: '2025-07', text: '颐养中心开展消防演练' },
        { day: '07', month: '2025-07', text: '新员工入职宣讲会' }
      ],
      calendarSelected: [],
      statusText: {
        expired: '已过期',
        finished: '已完成',
        upcoming: '即将到期'
      },
      workScheduleList: [
        {
          title: '为201房长者测量血压',
          time: '2025-07-20 09:00-09:30',
          location: '颐养中心2楼护理区',
          status: 'upcoming'
        },
        {
          title: '协助305房长者用餐',
          time: '2025-06-29 12:00-12:30',
          location: '颐养中心3楼餐厅',
          status: 'expired'
        },
        {
          title: '健康巡查（上级分配）',
          time: '2025-06-28 15:00-16:00',
          location: '颐养中心全区',
          status: 'finished'
        }
      ],
      personalScheduleList: [
        {
          title: '家人来访',
          time: '2025-07-21 14:00-15:00',
          location: '颐养中心会客厅',
          status: 'upcoming'
        },
        {
          title: '健康检查',
          time: '2025-06-27 10:00-10:30',
          location: '颐养中心医务室',
          status: 'finished'
        }
      ],
      knowledgeList: [
        { title: '如何安全协助长者起身', desc: '掌握正确的搀扶和起身技巧，避免长者跌倒和自身受伤。' },
        { title: '预防褥疮的护理要点', desc: '定时为卧床长者翻身，保持皮肤清洁干燥，注意局部按摩。' },
        { title: '长者饮食注意事项', desc: '合理搭配膳食，注意营养均衡，避免过硬、过烫食物。' },
        { title: '如何观察长者健康异常', desc: '关注长者精神、食欲、排泄等变化，及时上报异常情况。' },
        { title: '轮椅安全使用规范', desc: '推行轮椅时注意刹车，转弯减速，协助上下轮椅要稳。' }
      ]
    }
  },
  async onLoad() {
    // 获取本地userId
    const userId = uni.getStorageSync('userId');
    if (userId) {
      try {
        const res = await getUserInfo(userId);
        // 假设后端返回 { code: 1000, data: { ...user } }
        if (res && res.code === 1000 && res.data) {
          this.user = res.data;
        }
      } catch (e) {
        // 获取失败可忽略或提示
      }
    }
  },
  async onShow() {
    // 每次页面显示时刷新用户信息
    const userId = uni.getStorageSync('userId');
    if (userId) {
      try {
        const res = await getUserInfo(userId);
        if (res && res.code === 1000 && res.data) {
          this.user = res.data;
        }
      } catch (e) {
        // 获取失败可忽略或提示
      }
    }
  },
  methods: {
    onAIClick() {
      // 预留AI对话入口
      uni.showToast({ title: 'AI对话功能即将上线', icon: 'none' });
    },
    onMessageClick() {
      // 跳转到消息/通知页面
      uni.showToast({ title: '消息中心即将上线', icon: 'none' });
    },
    onCalendarChange(e) {
      // 处理日历选择
    },
    onAddSchedule() {
      uni.showToast({ title: '添加日程功能即将上线', icon: 'none' });
    },
    onMoreSchedule() {
      uni.showToast({ title: '更多日程功能即将上线', icon: 'none' });
    }
  }
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 20px;
  padding-top: 20px;
}
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;         /* 横向100%覆盖 */
  height: 100%;         /* 高度随内容自适应 */
  z-index: 0;
  background: url('@/static/images/background1.png') no-repeat center top;
  background-size: 100% auto;   /* 横向拉满，纵向自适应 */
  pointer-events: none;
}
.home-page > view:not(.bg-image),
.home-page > swiper:not(.bg-image),
.home-page > image:not(.bg-image),
.home-page > text:not(.bg-image),
.home-page > input:not(.bg-image) {
  position: relative;
  z-index: 1;
}

/* 顶部用户信息 */
.top-bar {
  display: flex;
  align-items: center;
  padding: 26px 16px 0 16px;
}
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(91,184,172,0.10);
}
.user-name {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

/* 搜索栏+AI+消息 */
.search-row {
  display: flex;
  align-items: center;
  padding: 10px 16px 0 16px;
  gap: 8px;
}
.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(91,184,172,0.10);
  padding: 0 10px;
  height: 32px;
  min-width: 0;
}
.search-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #333;
  height: 32px;
  line-height: 32px;
}
.icon-btn {
  width: 26px;
  height: 26px;
}

/* 轮播图 */
.swiper-section {
  margin: 10px 8px 6px 8px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(91,184,172,0.06);
}
.swiper {
  width: 100%;
  height: 170px;
}
.swiper-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.swiper-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  color: #fff;
  font-size: 15px;
  padding: 6px 12px;
}

/* 颐养资讯 */
.news-section {
  margin: 10px 8px 0 8px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 0 4px 0;
  box-shadow: 0 8px 32px rgba(91,184,172,0.18);
}
.news-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 16px 8px 16px;
}
.info-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}
.news-more {
  font-size: 13px;
  color: #5bb8ac;
  margin-left: auto;
}
.news-list {
  border-top: 1px solid #f0f0f0;
}
.news-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
}
.news-date {
  width: 44px;
  text-align: center;
  margin-right: 10px;
  background: #e6f7f4;
  border-radius: 8px;
  padding: 4px 0;
}
.news-day {
  font-size: 18px;
  color: #5bb8ac;
  font-weight: bold;
  display: block;
}
.news-month {
  font-size: 11px;
  color: #888;
  display: block;
}
.news-content {
  flex: 1;
}
.news-text {
  font-size: 15px;
  color: #333;
}

/* 我的日程 */
.schedule-section {
  margin: 14px 8px 0 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(91,184,172,0.18);
  padding-bottom: 10px;
}
.schedule-header {
  display: flex;
  align-items: center;
  padding: 12px 16px 8px 16px;
}
.schedule-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}
.schedule-more {
  font-size: 13px;
  color: #5bb8ac;
  margin-left: auto;
}
.calendar-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.calendar-bar {
  width: 100%;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f6f8fa;
  box-sizing: border-box;
  /* 可根据需要调整padding */
}
uv-calendars {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  display: block;
}
.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 0 16px;
}
.add-schedule {
  display: flex;
  align-items: center;
  color: #5bb8ac;
  font-size: 14px;
}
.add-icon {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.schedule-more-btn {
  color: #5bb8ac;
  font-size: 14px;
}
.schedule-group-title {
  font-size: 15px;
  color: #5bb8ac;
  font-weight: bold;
  margin: 12px 16px 4px 16px;
}
.schedule-list {
  margin: 0 12px;
}
.schedule-item {
  display: flex;
  align-items: flex-start;
  background: #f8fafd;
  border-radius: 8px;
  margin-top: 10px;
  padding: 10px 10px 10px 10px;
  position: relative;
}
.schedule-info {
  flex: 1;
  margin-left: 0;
}
.schedule-title2 {
  font-size: 15px;
  color: #333;
  font-weight: bold;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-status-tag {
  font-size: 12px;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
}
.schedule-status-tag.expired {
  background: #e0e0e0;
  color: #888;
}
.schedule-status-tag.finished {
  background: #5bb8ac;
  color: #fff;
}
.schedule-status-tag.upcoming {
  background: #ffd966;
  color: #333;
}
.schedule-time {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
}
.schedule-location {
  font-size: 13px;
  color: #888;
}
.schedule-type {
  font-size: 12px;
  border-radius: 8px;
  padding: 4px 10px;
  margin-left: 10px;
  align-self: flex-end;
  font-weight: bold;
}

/* 护理知识模块 */
.knowledge-section {
  margin: 14px 8px 0 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(91,184,172,0.18);
  padding-bottom: 10px;
}
.knowledge-header {
  display: flex;
  align-items: center;
  padding: 12px 16px 8px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.knowledge-icon {
  width: 22px;
  height: 22px;
  margin-right: 6px;
}
.knowledge-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.knowledge-list {
  padding: 0 16px;
}
.knowledge-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}
.knowledge-item-title {
  font-size: 15px;
  color: #333;
  font-weight: bold;
}
.knowledge-item-desc {
  font-size: 13px;
  color: #888;
  display: block;
  margin-top: 2px;
}

</style>